import { View, Text, Button, ScrollView } from '@tarojs/components';
import { useState } from 'react';
import Taro from '@tarojs/taro';
// import { AtButton } from 'taro-ui';
import Modal from '@/components/Modal/index';
import Radio from '@/components/Radio';
import './index.scss';

interface IProps {
  show: boolean;
  list: any[];
  onSelect: (user: any) => void;
  onClose: () => void;
}

export default function ({ show, list, onSelect = () => {}, onClose }: IProps) {
  const [selectValue, setSelectValue] = useState<number | string>('');
  const _onSelect = (value: number | string) => {
    setSelectValue(value);
    const user = list.filter((item) => item.id === value)?.[0];
    onSelect(user);
  };

  const edidAddress = (user?: any) => {
    console.log('user: ', user);
    // const queryStr = queryString.stringify(user);
    Taro.navigateTo({
      url: `/subPages/address/addAddress/index?addressInfo=${JSON.stringify(user)}`,
    });
    // Taro.navigateTo({
    //   url: '/subPages/receiver/index' + '?' + queryStr,
    // });
  };

  return (
    <Modal title="选择收货人" scrollY show={show} onClose={onClose} className="select-user-modal">
      <ScrollView scrollY className="address-list-container">
        {list?.map((item: any, index) => (
          <View className="address-item" key={index}>
            <View className="left">
              <Radio
                checked={selectValue === item.id}
                value={item.id}
                onChange={() => _onSelect(item.id)}
              >
                <View className="middle">
                  <View className="user-info">
                    <Text className="user-name">{item.name}</Text>
                    <Text>{item.mobile}</Text>
                  </View>
                  <Text className="area-info">
                    {item.province_id}
                    {item.city_id}
                    {item.area_id}
                    {item.address}
                  </Text>
                </View>
              </Radio>
            </View>
            <View className="iconfont icon-edit" onClick={() => edidAddress(item)} />
          </View>
        ))}
      </ScrollView>

      <Button onClick={() => edidAddress()} className="add-address-btn">
        <Text className="iconfont icon-jiahao" />
        新增地址
      </Button>
    </Modal>
  );
}
